<template>
	<view style="padding: 25rpx 25rpx 190rpx;">
		<button class="addBtn" @click="addCoach">+新建教练</button>
		<view class="block">
			<view class="t">教练</view>
			<uni-list v-for="(s, index) in coachList" :key="index">
				<uni-list-item :thumb="s.picUrl">
					<template v-slot:body>
						<view class="flexBetween">
							<view @click="editCoach(s.id)">
								{{s.realName}} 								
								<uni-icons color="#d43e3e" type="compose" size="20"></uni-icons>
							</view>
												
							<view class="slotfooter" @click="chooseThis(s)">
								<uni-icons v-if="s.selected" color="#d43e3e" type="checkbox-filled" size="30"></uni-icons>
								<uni-icons v-else type="circle" color="#E5E5E5" size="30"></uni-icons>
							</view>
						</view>

					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="block">
			<view class="t">领队</view>
			<uni-list v-for="(s, index) in leaderList" :key="index">
				<uni-list-item :thumb="s.picUrl">
					<template v-slot:body>
						<view class="flexBetween">
							<view @click="editCoach(s.id)">
								{{s.realName}} 								
								<uni-icons color="#d43e3e" type="compose" size="20"></uni-icons>
							</view>
												
							<view class="slotfooter" @click="chooseThis(s)">
								<uni-icons v-if="s.selected" color="#d43e3e" type="checkbox-filled" size="30"></uni-icons>
								<uni-icons v-else type="circle" color="#E5E5E5" size="30"></uni-icons>
							</view>
						</view>
			
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="block">
			<view class="t">队医</view>
			<uni-list v-for="(s, index) in doctorList" :key="index">
				<uni-list-item :thumb="s.picUrl">
					<template v-slot:body>
						<view class="flexBetween">
							<view @click="editCoach(s.id)">
								{{s.realName}} 								
								<uni-icons color="#d43e3e" type="compose" size="20"></uni-icons>
							</view>
												
							<view class="slotfooter" @click="chooseThis(s)">
								<uni-icons v-if="s.selected" color="#d43e3e" type="checkbox-filled" size="30"></uni-icons>
								<uni-icons v-else type="circle" color="#E5E5E5" size="30"></uni-icons>
							</view>
						</view>
			
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="block">
			<view class="t">翻译</view>
			<uni-list v-for="(s, index) in translatorList" :key="index">
					<uni-list-item :thumb="s.picUrl">
						<template v-slot:body>
							<view class="flexBetween">
								<view @click="editCoach(s.id)">
									{{s.realName}} 								
									<uni-icons color="#d43e3e" type="compose" size="20"></uni-icons>
								</view>
													
								<view class="slotfooter" @click="chooseThis(s)">
									<uni-icons v-if="s.selected" color="#d43e3e" type="checkbox-filled" size="30"></uni-icons>
									<uni-icons v-else type="circle" color="#E5E5E5" size="30"></uni-icons>
								</view>
							</view>
				
						</template>
					</uni-list-item>
				</uni-list>
		</view>
		<view class="block">
			<view class="t">官员</view>
			<uni-list v-for="(s, index) in officialList" :key="index">
						<uni-list-item :thumb="s.picUrl">
							<template v-slot:body>
								<view class="flexBetween">
									<view @click="editCoach(s.id)">
										{{s.realName}} 								
										<uni-icons color="#d43e3e" type="compose" size="20"></uni-icons>
									</view>
														
									<view class="slotfooter" @click="chooseThis(s)">
										<uni-icons v-if="s.selected" color="#d43e3e" type="checkbox-filled" size="30"></uni-icons>
										<uni-icons v-else type="circle" color="#E5E5E5" size="30"></uni-icons>
									</view>
								</view>
					
							</template>
						</uni-list-item>
					</uni-list>
			
		</view>
		<view class="block">
			<view class="t">其他</view>
			<uni-list v-for="(s, index) in otherList" :key="index">
				<uni-list-item :thumb="s.picUrl">
					<template v-slot:body>
						<view class="flexBetween">
							<view @click="editCoach(s.id)">
								{{s.realName}} 								
								<uni-icons color="#d43e3e" type="compose" size="20"></uni-icons>
							</view>
												
							<view class="slotfooter" @click="chooseThis(s)">
								<uni-icons v-if="s.selected" color="#d43e3e" type="checkbox-filled" size="30"></uni-icons>
								<uni-icons v-else type="circle" color="#E5E5E5" size="30"></uni-icons>
							</view>
						</view>
			
					</template>
				</uni-list-item>
			</uni-list>
			
<!-- 			<view class="list"  v-if="otherList.length>0">
				<view @click="chooseThis(s)" v-for="(s, index) in otherList" :key="index">
					<image class="photo" mode='aspectFill' :src="s.picUrl"></image>
					<text class="name">{{s.realName}}</text>
					<uni-icons v-if="s.selected" color="#1EC886" type="checkbox-filled" size="30"></uni-icons>
					<uni-icons v-else type="circle" color="#E5E5E5" size="30"></uni-icons>
				</view>
			</view>
			<view class="nodata" v-else>
				<text>暂无数据</text>
			</view>
 -->		
		</view>

		<view class="fixedBottom">
			<button class="btn btnKx"  v-if="signType!='2'" @click="goPrev" type="default">上一步</button>
			<button class="btn btn1"  v-if="signType!='2'" @click="goNext" type="default">下一步</button>
			<button class="btn btn1" v-else @click="chooseDone" type="default">完成</button>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
import * as match from '@/common/match.js';
import { onLoad,onShow } from '@dcloudio/uni-app';
import _ from 'lodash';
const data = reactive({
	baseFormData: {},
	hasChooseObj: {},
	groupId:'',
	coachList: [],
	leaderList: [],
	otherList: [],
	doctorList: [],
	translatorList: [],
	officialList: [],
	chooseObj:{},
	signType:''
});
const { baseFormData,hasChooseObj, groupId,coachList,leaderList,otherList,doctorList,translatorList,officialList,chooseObj,signType} = toRefs(data);
let matchId = ''
onLoad((option)=>{
	console.log(option)
	matchId = option.matchId
	if(option.groupId){
		groupId.value = option.groupId
	}
	if(option.signType){
		signType.value = option.signType
	}
	if(option.hasChooseObj){
		hasChooseObj.value = JSON.parse(decodeURIComponent(option.hasChooseObj))
	}
})
onShow(()=>{
	if(signType.value=='0'){
		geren()
	} else {
		tuandui()
	}
})
//获取报名时是否已选过
let hasChooseId
function tuandui(){
	Promise.all([
		match.getMyGroupForCpt(groupId.value,matchId),
		match.getChooseDoneGroupCoachs(matchId,groupId.value)
	]).then((res)=>{
		coachList.value = res[0].data.coaches || []
		leaderList.value = res[0].data.leaders || []
		otherList.value = res[0].data.others || []
		doctorList.value = res[0].data.teamDoctors || []
		translatorList.value = res[0].data.translators || []
		officialList.value = res[0].data.officials || []
		
		if(res[1].data.id!=null){
			hasChooseObj.value = res[1].data
			hasChooseId = res[1].data.id
		}
		
		let obj = hasChooseObj.value
		console.log(Object.keys(obj))
		if(Object.keys(obj).length>0){
			for(const c of coachList.value){
				if(obj.coachIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of leaderList.value){
				if(obj.leaderIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of otherList.value){
				if(obj.otherIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of doctorList.value){
				if(obj.teamDoctorIds&&obj.teamDoctorIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of translatorList.value){
				if(obj.translatorIds&&obj.translatorIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of officialList.value){
				if(obj.officialIds&&obj.officialIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
		}
	})
}
function geren(){
	Promise.all([
		match.getMyPersonInfoWithcptId(matchId),
		match.getChooseDoneSingleCoachs(matchId)
	]).then((res)=>{
		coachList.value = res[0].data.coaches || []
		leaderList.value = res[0].data.leaders || []
		otherList.value = res[0].data.others || []
		doctorList.value = res[0].data.teamDoctors || []
		translatorList.value = res[0].data.translators || []
		officialList.value = res[0].data.officials || []
		
		if(res[1].data.id!=null){
			hasChooseObj.value = res[1].data
			hasChooseId = res[1].data.id
		}
		
		let obj = hasChooseObj.value
		console.log(Object.keys(obj))
		if(Object.keys(obj).length>0){
			for(const c of coachList.value){
				if(obj.coachIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of leaderList.value){
				if(obj.leaderIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of otherList.value){
				if(obj.otherIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of doctorList.value){
				if(obj.teamDoctorIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of translatorList.value){
				if(obj.translatorIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
			for(const c of officialList.value){
				if(obj.officialIds.indexOf(c.id)>-1){
					c.selected = true
				}
			}
		}
	})	
}

function goPrev() {
	uni.navigateBack();
}

function checkChoose(){
	let coachsArr = [];
	let leadersArr = [];
	let othersArr = [];
	let doctorsArr = [];
	let translatorArr = [];
	let officialArr = [];
	let coachIds = [];
	let leaderIds = [];
	let otherIds = [];
	let teamDoctorIds = [];
	let translatorIds = [];
	let officialIds = [];
	for (const c of coachList.value) {
		if (c.selected) {
			coachsArr.push(c);
			coachIds.push(c.id);
		}
	}
	for (const c of leaderList.value) {
		if (c.selected) {
			leadersArr.push(c);
			leaderIds.push(c.id);
		}
	}
	for (const c of otherList.value) {
		if (c.selected) {
			othersArr.push(c);
			otherIds.push(c.id);
		}
	}
	for (const c of doctorList.value) {
		if (c.selected) {
			doctorsArr.push(c);
			teamDoctorIds.push(c.id);
		}
	}
	for (const c of translatorList.value) {
		if (c.selected) {
			translatorArr.push(c);
			translatorIds.push(c.id);
		}
	}
	for (const c of officialList.value) {
		if (c.selected) {
			officialArr.push(c);
			officialIds.push(c.id);
		}
	}
	
		chooseObj.value.coachsArr = coachsArr||[]
		hasChooseObj.value.coachIds = coachIds||[]
		chooseObj.value.leadersArr = leadersArr||[]
		hasChooseObj.value.leaderIds = leaderIds||[]
		chooseObj.value.othersArr = othersArr||[]
		hasChooseObj.value.otherIds = otherIds||[]
		chooseObj.value.doctorsArr = doctorsArr||[]
		hasChooseObj.value.teamDoctorIds = teamDoctorIds||[]
		chooseObj.value.translatorArr = translatorArr||[]
		hasChooseObj.value.translatorIds = translatorIds||[]
		chooseObj.value.officialArr = officialArr||[]
		hasChooseObj.value.officialIds = officialIds||[]
	
}
function chooseDone(){
	checkChoose()
	var pages = getCurrentPages()
	var prevPage = pages[pages.length - 2]
	console.log(prevPage,chooseObj.value)
	prevPage.onShow(chooseObj.value)
	uni.navigateBack()
	// uni.navigateTo({
	// 	url:`/pages_match/match/add_rank?groupId=${groupId.value}&chooseObj=`+ encodeURIComponent(JSON.stringify(chooseObj.value)),
	// })
}
function goNext(){
	checkChoose()
	if(hasChooseObj.value.coachIds.length<1&&hasChooseObj.value.leaderIds.length<1){
		uni.showToast({
			icon: 'none',
			title: '请至少选择一个教练或领队',
			duration: 2000
		});
		return
	}

	var obj={
		cptId:matchId,
		coachIds:hasChooseObj.value.coachIds.toString()||'',
		leaderIds:hasChooseObj.value.leaderIds.toString()||'',
		otherIds:hasChooseObj.value.otherIds.toString()||'',
		teamDoctorIds:hasChooseObj.value.teamDoctorIds.toString()||'',
		translatorIds:hasChooseObj.value.translatorIds.toString()||'',
		officialIds:hasChooseObj.value.officialIds.toString()||''
	}

	if(hasChooseId){
		obj.id = hasChooseId
	}
	if(groupId.value&&groupId.value!=0){
		obj.unitId = groupId.value
	}
	if(signType.value=='0'){
		// 个人报名
		match.singleSignSavePerson(obj).then(res=>{
			console.log(res)
			let path = `/pages_match/match/choose_project?matchId=${matchId}`;
			uni.navigateTo({
				url: path
			});
		})
	}else if(signType.value=='1'){
		// 团队报名
		match.groupSignSavePerson(obj).then(res=>{
			let path = `/pages_match/match/choose_sportman?matchId=${matchId}&groupId=${groupId.value}&signType=${signType.value}`;
			uni.navigateTo({
				url: path
			});
		})
	}

}
function editCoach(id) {
	let path = `/pages_match/match/add_coach?groupId=${groupId.value}&id=${id}&signType=${signType.value}&noAthletes=1`;
	uni.navigateTo({
		url: path
	});
}
function chooseThis(s) {
	s.selected = !s.selected;
}
function addCoach() {
	// 存一下已选
	checkChoose()
	let path = `/pages_match/match/add_coach?groupId=${groupId.value}&id=0&signType=${signType.value}&noAthletes=1`;
	uni.navigateTo({
		url: path
	});
}
</script>

<style scoped lang="scss">
.addBtn {
	width: 700rpx;
	height: 90rpx;
	background: #ffffff;
	border: 1rpx solid #d43e3e;
	color: #d43e3e;
	font-size: 30rpx;
	border-radius: 15rpx;
}

.block .list {
	background: #ffffff;
	padding: 30rpx 0;
	display: flex;
	border-radius: 15px;
	flex-wrap: wrap;
}
.block .list view {
	position: relative;
	text-align: center;
	margin: 0 20rpx 20rpx 50rpx;
}
.block .list .photo {
	width: 100rpx;
	border-radius: 50%;
	display: block;
	height: 100rpx;
	object-fit: cover;
	background: #eee;
	margin: 0 0 17rpx;
}
.block .list .name {
	color: #000000;
	text-align: center;
	font-size: 30rpx;
}
.block .list > view uni-icons {
	position: absolute;
	right: -24rpx;
	top: 0;
	background: #fff;
	border-radius: 50%;
}
</style>
